<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="keywords" content="">
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0, user-scalable=no" />	
		<title>林业局</title>
		<link rel="stylesheet" href="/public/css/bootstrap.min.css" />
		<link rel="stylesheet" href="/public/css/font-awesome.css" />
		<link rel="stylesheet" href="/public/css/public.css" />
	</head>
	<body>
		<div class="bg">			
		</div>
		<div class="containe">
			<div class="all-bd">
			    <div class="row margin-bottom-10  vote-list-row">
				    <div class="col-xs-3 col-xs-offset-1 lei-name lei-name-two" >
				    	<span>姓</span><span>名</span>
				    </div>
				    <div class="col-xs-7 lei-input">
				    	<input type="text" name="username" id="username"/>
				    </div>
			    </div>
			    <div class="row margin-bottom-10 vote-list-row">
				    <div class="col-xs-3 col-xs-offset-1 lei-name lei-name-two" >
				    	<span>性</span>
				    	<span>别</span>
				    </div>
				    <div class="col-xs-7 lei-input">
				    	<select name="selectAge" id="sex">   
                           <option value="男">男</option>   
                           <option value="女">女</option>             
                        </select>                       
                        <div class="jt">
                        	<span class="fa fa-caret-down"></span>
                        </div>                       
				    </div>				    
			    </div>
			    <div class="row  margin-bottom-10 vote-list-row">
				    <div class="col-xs-3 col-xs-offset-1 lei-name lei-name-three" >
				    	<span>手</span><span>机</span><span>号</span>				    	
				    </div>
				    <div class="col-xs-7 lei-input" >
				    	<input type="text" id="phone"/>
				    </div>
			    </div>
			    <div class="row margin-bottom-10 vote-list-row">
				    <div class="col-xs-3 col-xs-offset-1 lei-name lei-name-four" >
				    	<span>工</span>
				    	<span>作</span>
				    	<span>单</span>
				    	<span>位</span>				    	
				    </div> 
				    <div class="col-xs-3 lei-input margin-bottom-10">
				        <select name="selectAge" id="province" class="selectx">   
                           <option value="上海市">上海市</option>   
                           <option value="江苏省">江苏省</option>             
                        </select>
                        <div class="jt jtx">
                        	<span class="fa fa-caret-down"></span>
                        </div>
                    </div>   
                    <div class="col-xs-3 lei-input margin-bottom-10 col-xs-offset-1">
				    	<select name="selectAge" id="city" class="selectx" >   
                           <option value="江苏省">上海市</option>   
                           <option value="江苏省">江苏省</option>             
                       </select>
                       <div class="jt jtx">
                           <span class="fa fa-caret-down"></span>
                       </div>
                    </div>			    	
				    <div class="col-xs-7 lei-input col-xs-offset-4 "  style="position: relative;">
				    	<input type="text" class="lei-address-input" id="company"/>
				    </div>
			    </div>
			    <div class="row margin-bottom-10 vote-list-row">
				    <div class="col-xs-3 col-xs-offset-1 lei-name lei-name-four"><span>工</span><span>作</span><span>岗</span><span>位</span></div>
				    <div class="col-xs-7 lei-input " >
				    	<select name="selectAge" id="post">   
                           <option value="检验检疫1">检验检疫1</option>   
                           <option value="检验检疫2">检验检疫2</option>             
                        </select>
                        <div class="jt">
                           <span class="fa fa-caret-down"></span>
                       </div>
				    </div>
			    </div>
			    <div class="row margin-bottom-10 vote-list-row">
				    <div class="col-xs-3 col-xs-offset-1  lei-name  lei-name-four"><span>个</span><span>人</span><span>爱</span><span>好</span></div>
				    <div class="col-xs-7 lei-input" >
				    	<input type="text" id="hobby"/>
				    </div>
			    </div>
			    <div class="row margin-bottom-10 vote-list-row">
				    <div class="col-xs-3 col-xs-offset-1 lei-name lei-name-four"><span>竞</span><span>赛</span><span>宣</span><span>言</span></div>
				    <div class="col-xs-7 lei-input" >
				    	<input type="text" id="declaration"/>
				    </div>
			    </div>
			    <div class="tj-btn row tk-btn-row vote-list-row">
			    	<div class="col-xs-6 text-center">
			    		<a href="#" class="photo">上传照片</a>
			    	</div>
			    	<div class="col-xs-6 text-center">
			    		<a href="#" class="tj">提交</a>
			    	</div>
			    </div>
			    <div class="vote-blank">
					&nbsp;&nbsp;
				</div>
				
			</div>
		</div>
		
		<!--test-->
		<div class="tk">			
            <div class="image-editor text-center">
                <input type="file" class="cropit-image-input">
                <div class="cropit-preview" ></div>      
            </div>  
			<div class="row tk-btn-row">
			    <div class="col-xs-6 text-center tk-btn">
			    	<a href="#" id="ok">确认</a>
			    </div>
			    <div class="col-xs-6 text-center tk-btn">
			    	<a href="#" id="ok1">取消</a>
			    </div>
			</div>
		</div>
		<input  type="hidden" value='' id="headimgurl">
		
		<script type="text/javascript" src="/public/js/jquery-2.2.3.min.js" ></script>
        <script type="text/javascript" src="/public/js/bootstrap.min.js" ></script>
        <script type="text/javascript" src="/public/js/jquery.cropit.js" ></script>
        <script>
        $(document).ready(function(){
        	var photoHeight = $(".cropit-preview").width();
        	var tkwidth=$(".tk").width();
        	var tkwimg=$(".cropit-preview").width();
        	var tklast=(tkwidth-tkwimg)/2;      
        	// alert(tkwimg);
        	$(".cropit-preview").height(photoHeight);
        	$(".cropit-preview").css("margin-left",tklast);
        	$(".photo").click(function(){
        		$(".tk").show();
        	});
        	$("#ok").click(function(){
        		$(".tk").hide();
        		$(".photo").html("再次上传");
        	});
        	$("#ok1").click(function(){
        		$(".tk").hide();
        	});
        });
        $(function() {
        $('.image-editor').cropit();

        $('#ok').click(function() {
        	
          // Move cropped image data to hidden input
          var imageData = $('.image-editor').cropit('export');
          $('.hidden-image-data').val(imageData);
          $.post('<?=site_url("welcome/upload")?>',{'img':imageData},function(data){
          		if (data.status=='success') {
          			alert('图片上传成功');
          			// console.log(data.imagePath)
          			$("#headimgurl").val(data.imagePath);
          		}else{
          			alert('上传失败')
          		}
          },'json');
          // window.open(imageData)

         
          // Prevent the form from actually submitting
          return false;
        });
      });	

        $(function(){

        	$.get('<?=site_url("welcome/province")?>',{},function(data){
        		var str = '';
        		for (var i = 0; i < data.length; i++) {
        			str += '<option value="'+data[i]['id']+'">'+data[i]['name']+'</option>';
        		}
        		$('#province').html(str);
        	},'json');

        	$('#province').change(function(){
        		var id = $('#province').val();
        		var url = "<?=site_url('welcome/city')?>/"+id;
        		getCity(url);
        	})

        	function getCity(url){
        		$.get(url,{},function(data){
        			var str = '';
	        		for (var i = 0; i < data.length; i++) {
	        			str += '<option value="'+data[i]['id']+'">'+data[i]['name']+'</option>';
	        		}
	        		$('#city').html(str);
        		},'json');
        	}

        	getCity('<?=site_url("welcome/city")?>');

        	$('.tj').click(function(){
        		var username    = $("#username").val();
				var sex         = $("#sex").val();
				var phone       = $("#phone").val();
				var province    = $("#province").val();
				var city        = $("#city").val();
				var company     = $("#company").val();
				var post        = $("#post").val();
				var hobby       = $("#hobby").val();
				var declaration = $("#declaration").val();
				var headimgurl  = $("#headimgurl").val();

				if (username.trim()==''|| username.length >20) {
					alert('用户名2~20个字符');
					return false;
				}

				reg =  /^1[3|4|5|8|7][0-9]\d{8}$/;
				if(!reg.test(phone)){
					alert('手机号码格式错误，请重新输入');
					return false;
				}

				if (company.trim()==''|| company.length >50) {
					alert('公司2~50个字符');
					return false;
				}

				if (post.trim()==''|| post.length >20) {
					alert('职位2~20个字符');
					return false;
				}

				if (hobby.trim()==''|| hobby.length >200) {
					alert('个人爱好2~200个字符');
					return false;
				}

				if (declaration.trim()==''|| declaration.length >200) {
					alert('竞赛宣言2~200个字符');
					return false;
				}

				if (headimgurl.trim()=='') {
					if (!confirm('您的照片还没上传，确认提交吗？')) {
						return false;
					}
				}

				var requestData = {
					username:username,
					sex:sex,
					phone:phone,
					province:province,
					city:city,
					company:company,
					post:post,
					hobby:hobby,
					declaration:declaration,
					headimgurl:headimgurl
				};

				$.post('<?=site_url("welcome/save_userinfo")?>',requestData,function(data){
					if(data.status==='success'){
						alert('信息提交成功')
					}else if(data.status==='exist'){
						alert('您已提交过信息，请不要重复提交。');
					}else{
						alert('信息提交失败')
					}
				},'json');
        	})
        })
        </script>
	</body>
</html>
